<template>
  <div class="aboutUs">
    <div class="aboutUs-content">
      <div class="aboutUs-image">
        <img src="../assets/image/aboutUS.png" alt>
      </div>
      <ul class="aboutUs-list">
        <li v-for="(item,key) in a" :key="key">
          <span>{{ item.title }}</span>
          <div class="aboutUs-name">
            <div v-for="(item1,key1) in item.aa" :key="'name'+key1">{{ item1.title }}</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="out">
      <router-link :to="{name:'login'}">
        <img src="../assets/image/aboutUs-close-circle.png" alt="">
      </router-link>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      a: [
        { title: "产品监制", aa: [{ title: "林梁军" }, { title: "胡杨" }] },
        {
          title: "系统作者",
          aa: [{ title: "刘勇" }],
        },
        { title: "产品设计", aa: [{ title: "邱渝" }] },
        { title: "UI设计", aa: [{ title: "杨康" }, { title: "韩恩洪" }] },
        {
          title: "前端开发",
          aa: [
            { title: "陈振" },
            { title: "杨成秀" },
            { title: "杨顺" },
          ],
        },
        {
          title: "后端开发",
          aa: [{ title: "刘勇" }, { title: "汪中川" }, { title: "周源钧" }, { title: "豆伟伟" }, { title: "晏方豪" }],
        },
        {
          title: "测试人员",
          aa: [{ title: "喻廷会" }],
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.aboutUs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .aboutUs-content {
    padding-top: 120px;
    .aboutUs-image {
      img {
        width: 1088px;
        height: 502px;
      }
    }
    .aboutUs-list {
      display: flex;
      justify-content: space-evenly;
      list-style-type: none;
      color: #666;
      span {
        font-weight: 500;
      }
      .aboutUs-name {
        font-size: 14px;
        padding-top: 10px;
        div {
          padding-top: 20px;
        }
      }
    }
  }
  .out {
    width: 100%;
    text-align: center;
    img {
      width: 48px;
      height: 48px;
    }
  }
}

@media (max-width: 1600px) {
  .aboutUs {
    .aboutUs-content {
      .aboutUs-image img {
        width: 930px;
        height: 345px;
      }
    }
  }
}
@media (max-width: 1399px) {
  .aboutUs {
    .aboutUs-content {
      .aboutUs-image img {
        width: 930px;
        height: 345px;
      }
    }
  }
}
@media (max-height: 760px) {
  .aboutUs {
    .aboutUs-content {
      padding-top: 20px;
    }
  }
}
</style>
